<template>
    <div>
        <Modal v-model="isShowModal" title="分红明细" @on-cancel="hide()" :mask-closable="false" fullscreen>

            <!--表格数据-->
            <Table :columns="columns" :data="data" size="small" :stripe="true" :max-height="650">
                <template slot-scope="{ row, index }" slot="level">
                    <span v-if="row.level == 0">普通用户</span>
                    <span v-if="row.level == 1">体验员</span>
                    <span v-if="row.level == 2">销售经理</span>
                    <span v-if="row.level == 3">销售总监</span>
                    <span v-if="row.level == 4">董事</span>
                </template>

                <template slot-scope="{ row, index }" slot="isReceive">
                    <span v-if="row.isReceive == 0">未领取</span>
                    <span v-if="row.isReceive == 1">已领取</span>
                    <span v-if="row.isReceive == 2">已过期</span>
                </template>

                <template slot-scope="{ row, index }" slot="receiveTime">
                    <span v-if="row.receiveTime">{{row.receiveTime}}</span>
                    <span v-else>-</span>
                </template>

                <template slot-scope="{ row, index }" slot="overdueTime">
                    <span v-if="row.overdueTime">{{row.overdueTime}}</span>
                    <span v-else>-</span>
                </template>

                <template slot-scope="{ row }" slot="action">
                    <Button type="success" size="small" style="margin-right: 5px" @click="showOrderLevelDetail(row)">等级明细</Button>
                    <Button type="success" size="small" style="margin-right: 5px" @click="showOrderBaskDetail(row)">分享明细</Button>
                </template>
            </Table>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide()">取消</Button>
                <Button type="primary" @click="hide()">确定</Button>
            </div>
        </Modal>

        <!--等级分红明细-->
        <order-level-detail ref="orderLevelDetail"></order-level-detail>
        <!--分享分红明细-->
        <order-bask-detail ref="orderBaskDetail"></order-bask-detail>
    </div>
</template>

<script>
    import orderLevelDetail from './order-level-detail';
    import orderBaskDetail from './order-bask-detail';
    export default {
        name: "order-share-detail",
        data() {
            return {
                isShowModal: false,
                params:{
                    orderVipId:''
                },
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户账号',
                        minWidth: 120,
                        key: 'username'
                    },
                    {
                        title: '用户等级',
                        minWidth: 120,
                        slot: 'level'
                    },
                    {
                        title: '分红金额(元)',
                        key: 'shareAmount',
                        width: 150
                    },
                    {
                        title: '领取状态',
                        minWidth: 120,
                        slot: 'isReceive'
                    },
                    {
                        title: '分红总次数',
                        minWidth: 120,
                        key: 'totalNum'
                    },
                    {
                        title: '分红次数',
                        minWidth: 120,
                        key: 'shareNum'
                    },
                    {
                        title: '领取时间',
                        width: 150,
                        slot: 'receiveTime'
                    },
                    {
                        title: '过期时间',
                        width: 150,
                        slot: 'overdueTime'
                    },
                    {
                        title: '创建时间',
                        width: 150,
                        key: 'createTime'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center',
                        fixed: 'right'
                    }
                ],
                data: []
            }
        },
        methods: {
            // 显示模态框
            show(row) {
                this.isShowModal = true;
                console.log(row)
                if(row.orderVipId){
                    this.params.orderVipId = row.orderVipId;
                    this.findOrderVipShare();
                }
            },
            // 查询分红明细
            findOrderVipShare(){
                this.$Spin.show();
                this.axios.post('/orderVip/findOrderVipShare', this.params).then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        if(res.data){
                            this.data = res.data;
                        }
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看分红明细接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 显示操作模态框
            showOrderLevelDetail(row) {
                this.$refs.orderLevelDetail.show(row);
            },
            // 显示操作模态框
            showOrderBaskDetail(row) {
                this.$refs.orderBaskDetail.show(row);
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            }
        },
        components:{
            orderLevelDetail,
            orderBaskDetail
        }
    }
</script>

<style scoped>

</style>